<template>
  <div class="wkproc-management-container">
    <el-card class="operate-container" shadow="never">
      <el-button type="primary" :icon="Plus" @click="handleCreate">新增工序</el-button>
    </el-card>

    <el-card class="table-container" shadow="never">
      <el-table :data="tableData" v-loading="loading" border style="width: 100%">
        <el-table-column prop="id" label="工序ID" width="150" align="center"/>
        <el-table-column prop="name" label="工序名称" />
        <el-table-column prop="createTime" label="创建时间" width="200" />
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="primary" link :icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button type="danger" link :icon="Delete" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑工序' : '新增工序'" width="500px" @close="handleDialogClose">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="工序名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {Plus, Edit, Delete} from '@element-plus/icons-vue'
import {getWkprocList, saveOrUpdateWkproc, deleteWkprocById} from '@/api/modules/wkproc'

const loading = ref(true)
const tableData = ref([])
const dialogVisible = ref(false)
const isEdit = ref(false)
const formRef = ref(null)
const form = reactive({id: null, name: ''})
const rules = {name: [{required: true, message: '请输入工序名称', trigger: 'blur'}]}

const fetchList = async () => {
  loading.value = true
  try {
    tableData.value = await getWkprocList()
  } catch (error) {
    console.error('获取工序列表失败', error)
  } finally {
    loading.value = false
  }
}

const resetForm = () => {
  form.id = null;
  form.name = '';
  if (formRef.value) formRef.value.clearValidate();
}

const handleDialogClose = () => resetForm()
const handleCreate = () => {
  isEdit.value = false;
  dialogVisible.value = true;
}
const handleUpdate = (row) => {
  isEdit.value = true;
  Object.assign(form, row);
  dialogVisible.value = true;
}

const handleDelete = (id) => {
  ElMessageBox.confirm('确定要删除该工序吗？', '提示', {type: 'warning'})
      .then(async () => {
        await deleteWkprocById(id)
        ElMessage.success('删除成功')
        fetchList()
      }).catch(() => {
  })
}

const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      await saveOrUpdateWkproc(form)
      ElMessage.success(isEdit.value ? '更新成功' : '新增成功')
      dialogVisible.value = false
      fetchList()
    }
  })
}

onMounted(() => {
  fetchList()
})
</script>

<style scoped>
.wkproc-management-container {
  padding: 20px;
}

.operate-container {
  margin-bottom: 20px;
}
</style>
